<template>
	<div class="add-user">
		<div class="add-user">
			<div class="user">
				<div class="tx-box">
					<el-avatar icon="el-icon-user-solid"></el-avatar>
					<span>{{username}}</span>
				</div>
			</div>
			<div class="pl-size">
				<div class="sta-pf">
					<p>
					<el-rate
						v-model="value"
						disabled
						show-score
						text-color="#ff9900"
						score-template="{value}">
					</el-rate>
				</p>
				</div>
				<div class="pf-size">
					<p>
						{{ size }}
					</p>
				</div>
				<div class="pf-size">
					<p>
						<span class="bb-size">{{ books }}</span>
						<span class="bb-size">{{ time }}</span>
						<span class="time-sp">
							<el-link type="danger" :underline="false">举报</el-link>
						</span>
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'FrontendVue2UserComments',
	data() {
		return {
			value: 3.7,
			//要渲染用户的名字
			username:'周杰伦',
			//要渲染用户的评论
			size:'我用IntelliJ，这本书用Eclipse，我用Java19，这本书用Java11，可以说是落后一代了',
			//要渲染书本的名字
			books:'Java（第6版）',
			//要渲染用户购买书本时间
			time:'2021/2/20'
		};
	},

	mounted() {
		
	},

	methods: {
		
	},
};
</script>

<style lang="less" scoped>
	.add-user{
		width: 1200px;
		height: 150px;
		display: flex;
		background-color: #6b6b6b17;
		border-bottom: 1px solid rgba(128, 128, 128, 0.264);
		.user{
			width: 200px;
			height: 150px;
			// background-color: rgb(128, 128, 128);
			display: flex;
			align-items: center;
			justify-content: center;
			.tx-box{
				display: flex;
				align-items: center;
				// justify-content: center;
				span{
					margin-left: 15px;
					font-size: 18px;
				}
			}
		}
		.pl-size{
			width: 1000px;
			// background-color: aqua;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-left: 50px;
			span{
				color: rgba(128, 128, 128, 0.493);
			}
			.sta-pf{
				width: 1000px;
			}
			.pf-size{
				width: 1000px;
			}
			.bb-size{
				margin: 0 50px;
			}
			.time-sp{
				margin-left: 450px;
			}
		}
	}
</style>